<div class="modal-wrp">

  <div class="pager">

    <button
      mat-icon-button
      type="button"
      matTooltip="Previous item"
      class="text-muted"
      (click)="previous()">
      <mat-icon>chevron_left</mat-icon>
    </button>

    <button
      mat-icon-button
      type="button"
      matTooltip="Next item"
      class="text-muted"
      (click)="next()">
      <mat-icon>chevron_right</mat-icon>
    </button>

  </div>

  <p
    class="text-muted text-nowrap text-truncate referrer"
    *ngIf="data.referrer"
    [title]="getUrl(data.referrer)">
    Origin: <a target="_blank" [href]="data.referrer">{{getUrl(data.referrer)}}</a>
  </p>

  <h3 mat-dialog-title class="mb-3">Request</h3>

  <form (ngSubmit)="save()">
    <div mat-dialog-content>

      <mat-form-field class="w-100 standalone-field">
        <span
          matPrefix
          matTooltip="Prompt"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>help_outline</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <input
          matInput
          cdkFocusInitial
          placeholder="Prompt"
          [(ngModel)]="data.prompt"
          name="prompt"
          autocomplete="off">
      </mat-form-field>

      <!-- CodeMirror editor in case data is code -->
      <div class="col-12" *ngIf="ready">

        <app-codemirror-hyperlambda
          [(model)]="model">
        </app-codemirror-hyperlambda>

      </div>

      <!-- Any other types of content besides code -->
      <div class="col-12 mb-0" *ngIf="!ready">

        <mat-form-field class="w-100 custom-alignment">
          <span
            matPrefix
            matTooltip="Completion for prompt"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>featured_play_list</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <textarea
            matInput
            name="txt_completion"
            placeholder="Completion"
            [(ngModel)]="data.completion"
            rows="18">
          </textarea>
        </mat-form-field>

      </div>

    </div>

    <div mat-dialog-actions [align]="'end'">

      <button
        mat-button
        mat-dialog-close>
        Close
      </button>

      <button
        mat-flat-button
        color="primary"
        type="submit">
        Save
      </button>

    </div>

  </form>

</div>
